<template>
	<view>
		<!-- 基于https://ext.dcloud.net.cn/plugin?id=1211的纯CSS进度条的封装，样式替换为em相对单位，并增加了test类型 -->
		<view class="progress" :class="Type" v-if="mode.toLowerCase() === 'css'">
			<view class="progress-text" v-if="Vice == true">{{ Width + '%' }}</view>
			<view class="progress-bar" :style="{ width: Width + '%' }">
				<view class="progress-text" v-if="Main == true">{{ Width + '%' }}</view>
			</view>
		</view>

		<!-- 基于https://ext.dcloud.net.cn/plugin?id=2870的强大进度条封装 -->
		<view v-else-if="mode.toLowerCase() === 'progress'">
			<view class="flex a-center content" v-if="lineData">
				<view><slot name="content"></slot></view>
			</view>
			<view class="flex a-center" style="padding-right: 10rpx;">
				<view class="progress-container" id="container" ref="progressContainer" :style="{ background: inBgColor }">
					<view
						class="progress-content flex j-end"
						id="content"
						ref="progressContent"
						:style="{ height: getstrokeWidth, background: bgColor, width: contentWidth, transition: `width ${duration / 1000}s ease` }"
						v-if="isAnimate"
					>
						<view class="textInside flex a-center j-center" v-if="textInside && !noData">
							<view>{{ percentage }}%</view>
						</view>
					</view>
					<view v-if="!isAnimate" class="progress-content flex j-end" :style="{ width: percentage + '%', height: getstrokeWidth, background: bgColor }">
						<view class="textInside flex a-center j-center" v-if="textInside && !noData">
							<view class="text">{{ percentage }}%</view>
						</view>
					</view>
				</view>
				<view>
					<view class="percentage" v-if="!textInside && !lineData && !noData && !isAnimate">{{ percentage }}%</view>
				</view>
			</view>
		</view>
		
		<view v-else>
			<text>参数错误</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		//进度条模式
		mode: {
			type: String,
			default: 'css'
		},
		// 基于CSS进度条属性
		// 进度条百分比
		Width: {
			type: Number,
			default: 0
		},
		// 进度条样式
		/*
				aqua
				copper
				candy
				neon
				shine
				zigzag
				diamond
				hearts
				sparkle
			*/
		Type: {
			type: String,
			default: 'aqua'
		},
		// 主进度显示百分比
		Main: {
			type: Boolean,
			default: true
		},
		// 副进度显示百分比
		Vice: {
			type: Boolean,
			default: false
		},
		// 基于强大进度条样式
		// 进度条的值
		percentage: {
			type: [String],
			default: '0'
			// required: true
		},
		// 是否内联显示数据
		textInside: {
			type: Boolean,
			default: false
		},
		// 进度条高度
		strokeWidth: {
			type: [Number, String],
			default: '0.8em'
		},
		// 默认动画时长
		duration: {
			type: [Number, String],
			default: 2000
		},
		// 是否有动画
		isAnimate: {
			type: Boolean,
			default: false
		},
		// 背景颜色
		bgColor: {
			type: String,
			default: '#409eff'
		},
		// 是否不显示数据
		noData: {
			type: Boolean,
			default: false
		},
		// 是否自定义显示内容
		lineData: {
			type: Boolean,
			default: false
		},
		// 自定义底色
		inBgColor: {
			type: String,
			default: '#ebeef5'
		}
	},
	computed:{
		getstrokeWidth(){
			return this.addUnit(this.strokeWidth);
		},
	},
	data() {
		return {
			width: 0,
			timer: null,
			containerWidth: 0,
			contentWidth: 0
		};
	},
	mounted() {
		this.$nextTick(() => {
			this.start();
		});
	},
	methods: {
		start() {
			if (this.isAnimate) {
				// #ifdef H5
				this.$nextTick(() => {
					let progressContainer = this.$refs.progressContainer.$el;
					let progressContent = this.$refs.progressContent.$el;
					let style = window.getComputedStyle(progressContainer, null);
					let width = style.width.replace('px', '') * ((this.percentage * 1) / 100);
					progressContent.style.width = width.toFixed(2) + 'px';
					progressContent.style.transition = `width ${this.duration / 1000}s ease`;
				});
				// #endif
				const container = uni
					.createSelectorQuery()
					.in(this)
					.selectAll('#container');
				const content = uni
					.createSelectorQuery()
					.in(this)
					.selectAll('#content');
				container.boundingClientRect().exec(res1 => {
					this.contentWidth = res1[0][0].width * 1 * ((this.percentage * 1) / 100).toFixed(2) + 'px';
				});
			}
		},
		// 添加单位，如果数值则单位是rpx，其它如rpx，%，px，em,vw,vh等单位结尾或者值为auto，直接返回
		addUnit(value = 'auto', unit = 'rpx') {
			value = String(value);
			return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value) ? `${value}${unit}` : value;
		}
	}
};
</script>
<style lang="scss">
// CSS进度条样式
@import './cssProcess.css';

// 强大进度条样式
.content {
	margin-bottom: 0.9em;
	.c-per {
		font-size: 2em;
	}
}
.progress-container {
	width: 100%;
	border-radius: 10em;
	.progress-content {
		border-radius: 10em;
		width: 0;
	}
	.textInside {
		color: #fff;
		margin-right: 0.5em;
		position: relative;
	}
}
.text {
	margin-left: 0.5em;
}
.percentage {
	margin-left: 0.5em;
	font-size: 0.9em;
	width: 2.5em;
}
.flex {
	display: flex;
}
.a-center {
	align-items: center;
}
.j-center {
	justify-content: center;
}
.j-between {
	justify-content: space-between;
}
.j-end{
	justify-content: flex-end;
}
.content {
	margin-bottom: 0.9em;
	color: #666;
	font-size: 1.5em;
}
</style>
